<template>
	<view class="sort-page">
		<view class="sort-title">产品排序设置 <view class="title-tip">(数字从小到大对应从左到右)</view> </view>
		<view v-for="(item,index) in submitList" :key="index" class="item-box">
			<view class="item-left">{{index+1}}</view>
			<!-- <view class="item-right">
				<input class="uni-input" type="number" v-model.trim="item.modelSort" maxlength="10"
					placeholder="请输入序号" />
			</view> -->
			 <uni-data-select
			        v-model="item.modelVal"
			        :localdata="productList"
			        @change="(val)=>sortChange(val,index)"
			        :clear="true"
			      ></uni-data-select>
		</view>
		<view class="footer-box">
			<view @click="submitEvent" class="submit-btn">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [],
				shopId: '',
				submitList:[]
			};
		},
		methods: {
			// 排序
			sortChange(val,index){
				this.submitList.forEach((data,id)=>{
					if(id !== index && data.modelVal === val){
						data.modelVal = ''
						data.modelName = ''
						data.modelType = ''
						data.sortNum = ''
					}
				})
				this.submitList[index].sortNum = index + 1
				this.productList.forEach((item)=>{
					if(item.modelSort === val){
						this.submitList[index].modelName = item.modelName
						this.submitList[index].modelType = item.modelType
					}
				})
			},
			// 获取产品排序信息
			getProductInfp() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/model/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if(res?.data?.length){
						this.submitList = []
					res.data.forEach((item,index)=>{
						item.text = item.modelName
						item.value = item.modelSort
						const obj = {
							modelVal:item.modelSort,
							modelName:item.modelName,
							modelType:item.modelType,
							sortNum:index+1
						}
						this.submitList.push(obj)
					})
						this.productList = res.data
					}
				}).catch(err => {
					console.error('请求异常：', err)
				})
			},
			// 保存
			submitEvent(){
				let flag = true
				this.submitList.forEach((item)=>{
					if(item.modelVal === ''){
						flag = false
					}
					item.modelSort = item.sortNum
				})
				if(!flag){
					uni.showToast({
						title:'排序不能为空，请补充完整',
						duration:2000,
						icon:'none'
					})
					return
				}
				const data = {
					shopId:this.shopId,
					modelList:this.submitList
				}
				this.$request({
					method: 'post',
					url: `/applet/store/product/modelSortConfig`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							duration: 3000,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.getProductInfp()
		}
	}
</script>

<style lang="scss" scoped>
	.sort-page {
		padding: 30rpx;
	}
	
	.sort-title{
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.title-tip{
		color: #999;
		font-size: 20rpx;
	}

	.item-box {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFF;
	}
	
	.item-left{
		width: 50rpx;
		height: 50rpx;
		background: #ffd89f;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}
	
	::v-deep .uni-input{
			   height: 60rpx;
			   width: 300rpx;
	}
	
	::v-deep .uni-input-wrapper{
			   border: 1px solid #000;
			   box-sizing: border-box;
			   border-radius: 8rpx;
			   padding-left: 20rpx;
	}
	
	.footer-box{
			      display: flex;
			      justify-content: center;
			      align-items: center;
			      position: fixed;
			      width: 100%;
			      box-sizing: border-box;
			      bottom: 0;
			      left: 0;
			      padding: 20px;
			   
			   .submit-btn{
				   flex: 1;
				   background: #ff9600;
				   color: #FFF;
				   border-radius: 8rpx;
				   padding: 20rpx 0;
				   text-align: center;
			   }
	}
</style>